<script type="text/javascript">
    var searchUrl = "<?php echo site_url("social/search/"); ?>";
    function hideListe() {
        $('#detailsOfUsers').hide();
        $('#listeOfUsers').show();
        $('#btnListIcon').removeClass("btn-info");
        $('#btnThIcon').addClass("btn-info");
//        $('#listPng').attr("src", "<?php echo img_url(); ?>s-list.png");
//        $('#detailsPng').attr("src", "<?php echo img_url(); ?>details.png");
    }
    
    function  hideDetails() {
        $('#listeOfUsers').hide();
        $('#detailsOfUsers').show();
        $('#btnThIcon').removeClass("btn-info");
        $('#btnListIcon').addClass("btn-info");
//        $('#listPng').attr("src", "<?php echo img_url(); ?>list.png");
//        $('#detailsPng').attr("src", "<?php echo img_url(); ?>s-details.png");
    }
    
</script>

<div class="rounded">
    <div class="span5 rounded">
        <?php
        $attributes = array('id' => 'frm_search', 'class' => 'form-search');
        //  echo form_open('', $attributes);
        ?>
        <div class="input-append">
            <input title="search for a friend" class="search-query" type="text" style="width: 286px; "  id="search">
            <button onclick="search();
        return false;" class="btn btn-primary" >Search</button>
        </div>
        <?php
        // echo form_close();
        ?>
    </div>

    <div id="listeOfUsers" class="span5 rounded" style="border:1px solid #ccc; height: 480px;">
        <div class="row heightAndScroll">
            <?php
            $i = 0;
//            for($i=0;$i<50;$i++)
            foreach ($users as $u) {
                if ($u->id != $user->id) {
                    ?>
                    <div class="span1 notSelected" style=" height: 60px; width:59px">
                        <a href="javascript:loadChatWith('<?php echo $u->id; ?>');">
                            <div style="position: relative; width:100%">
                                <img style="position:absolute" src="<?php echo css_url("chat/with") . "../pht/" . $u->tof; ?>"  />
                                <img class="<?php echo "statut" . $u->id; ?>" title="<?php echo $u->statut; ?>" style="position:absolute; width: 9px; height:9px; margin-left:41px; z-index: 1000;" src="<?php echo img_url() . $u->statut . ".png"; ?>" />
                            </div>
                        </a>
                    </div>
                    <?php
                }
            }
            ?>
            <div class='clear'></div>
            <div class="hr span5">Online friends :</div>
            <div class='clear'></div>
            <?php
            $i = 0;
//            for($i=0;$i<50;$i++)
            foreach ($online_friends as $u) {
                if ($u->id != $user->id) {
                    ?>
                    <div class="span1 notSelected" style=" height: 60px; width:59px">
                        <a href="javascript:loadChatWith('<?php echo $u->id; ?>');">
                            <div style="position: relative; width:100%">
                                <img style="position:absolute" src="<?php echo css_url("chat/with") . "../pht/" . $u->tof; ?>"  />
                                <img class="<?php echo "statut" . $u->id; ?>" title="<?php echo $u->statut; ?>" style="position:absolute; width: 9px; height:9px; margin-left:41px; z-index: 1000;" src="<?php echo img_url() . $u->statut . ".png"; ?>" />
                            </div>
                        </a>
                    </div>
                    <?php
                }
            }
            ?>
        </div>
    </div>

    <div id="detailsOfUsers" class="span5 rounded heightAndScroll" style="border:1px solid #ccc; height: 480px;">
        <?php
        $i = 0;
        foreach ($users as $u) {
            if ($u->id != $user->id) {
                ?>
                <div class="row">
                    <div id="<?php echo $u->id; ?>" class="foundUserTip span1 notSelected" style="height: 60px; width:59px">
                        <a href="javascript:loadChatWith('<?php echo $u->id; ?>')">
                            <div style="position: relative; width:100%">
                                <img style="position:absolute" src="<?php echo css_url("chat/with") . "../pht/" . $u->tof; ?>"  />
                                <img class="<?php echo "statut" . $u->id; ?>" title="<?php echo $u->statut; ?>" style="position:absolute; width: 9px; height:9px; margin-left:41px; z-index: 1000;" src="<?php echo img_url() . $u->statut . ".png"; ?>" />
                            </div>
                        </a>
                    </div>
                    <div class="span2" style="line-height:66%; padding-top: 5px;">
                        <p><?php echo $u->firstname . " " . $u->lastname; ?></p>
                        <?php if (isset($u->city->name) && (isset($u->city->name))) {
                            ?>
                            <p><?php echo $u->city->name . ", " . $u->country->name; ?></p>
                            <?php
                        }
                        ?>
                        <?php if (isset($u->city->name) && (!isset($u->city->name))) {
                            ?>
                            <p><?php echo $u->city->name; ?></p>
                            <?php
                        }
                        ?>
                        <?php
                        if (!isset($u->city->name) && isset($u->city->name)) {
                            ?>
                            <p><?php echo $u->country->name; ?></p>
                            <?php
                        }

                        if ($u->birthday != "") {
                            ?>
                            <p><?php echo $u->birthday; ?></p>
                            <?php
                        }
                        ?>
                        <span id="ntf<?php echo $u->id ?>">
                            <?php echo $u->notifsForMe == 0 ? "" : $u->notifsForMe; ?>
                        </span>
                        <!--<p><?php echo $u->statut; ?></p>-->
                    </div>
                    <div class="span1 rounded">
                        <?php
                        for ($i = 0; $i < sizeof($u->networks); $i++) {
                            $imgUrl = img_url() . $u->networks[$i]->logo;
                            $url = $u->networks[$i]->url;
                            echo "<div>";
                            echo "<a target='_blank' href='http://$url'><img src='$imgUrl' style='width: 15px !important;height: 17px !important;border: none !important;'/></a>";
                            echo "</div>";
                        }
                        ?>
                    </div>
                </div>
                <?php
            }
        }
        ?>
        <div class='clear'></div>
        <div class="hr">Online friends :</div>
        <div class='clear' style='height:20px'></div>
        <?php
        $i = 0;
//            for($i=0;$i<50;$i++)
        foreach ($online_friends as $u) {
            if ($u->id != $user->id) {
                ?>
                <div class="span1 notSelected" style=" height: 60px; width:59px">
                    <a href="javascript:loadChatWith('<?php echo $u->id; ?>');">
                        <div style="position: relative; width:100%">
                            <img style="position:absolute" src="<?php echo css_url("chat/with") . "../pht/" . $u->tof; ?>"  />
                            <img class="<?php echo "statut" . $u->id; ?>" title="<?php echo $u->statut; ?>" style="position:absolute; width: 9px; height:9px; margin-left:41px; z-index: 1000;" src="<?php echo img_url() . $u->statut . ".png"; ?>" />
                        </div>
                    </a>
                </div>
                <?php
            }
        }
        ?>
    </div>

    <div class="span5 rounded" style="border:1px solid #ccc; height: 30px;">
        <div class="btn-group">
            <a id="btnListIcon" class="btn btn-info" href="javascript:hideDetails()"><i class="icon-list"></i></a>
            <a id="btnThIcon" class="btn" href="javascript:hideListe()"><i class="icon-th"></i></a>
        </div>

        <!--        <a href="javascript:hideListe()">
                    <i class="icon-th large"></i>
                    <img id="detailsPng" src="<?php echo img_url() . "s-details.png"; ?>"/>
                </a>  
        
                <i class="icon-list large"></i>
                        
                    <a href="javascript:hideDetails()">
                    <img id="listPng" src="<?php echo img_url() . "list.png"; ?>"/>
                </a>
        -->
    </div>
    <div id="tipUserF" style="display:none;">
        <div id="subtooltipU" class="subtooltipClass" style="width:200px; height: 60px;">
            hello!!!
        </div>
    </div>
    <script>
        $('#listeOfUsers').hide();
    </script>
</div>
